<<<<<<< HEAD
<script setup>
import { ref, reactive, watch } from "vue";
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { request } from "../../../common/http";
import { ApiUrl } from "../../../common/ApiUrl";
import { Toast } from "@/utils";
import NavBar from "../../components/NavBar.vue";

/* 参数列表 */
let params = ref({
	/* 用户ID */
	userId: null,
	/* 搜索关键词，填手机号或者用户昵称 */
	keyword: null,
	/* 排序方式，升序: asc 降序: desc */
	orderStr: null,
	/* 排序字段，余额: nowMoney 积分: integral 消费: payCount */
	fieldStr: null,
	/* 每页页码 */
	pageNum: 1,
	/* 每页显示记录数 */
	pageSize: 10,
	/* 总共多少条数据 */
	pageCount: 1,
})
/* 登录的用户信息 */
let userInfo = ref({});
/* 会员列表 */
let memberList = ref([]);
/* 统计相关信息 */
let count = reactive({
	/* 总用户数 */
	totalUsers: 0,
	/* 今日新增用户数 */
	todayNewUsers: 0,
	/* 总优惠券数量 */
	couponCount: 0,
	/* 总积分 */
	totalIntegral: 0,
});
const state = reactive({
	navHeight: 0,
})

onShow(() => {
	const user = JSON.parse(uni.getStorageSync("user"));
	userInfo.value = user.userInfo;
	params.value.userId = userInfo.value.id;
	/* 获取统计信息 */
	getMemberCount();
	/* 获取会员列表 */
	getMemberList();
})

/* 上拉加载 */
onReachBottom(() => {
	params.value.pageNum++;
	if (params.value.pageNum < params.value.pageCount + 1 && (params.value.pageCount != 1)) {
		/* 获取会员列表 */
		getMemberList();
	} else {
		/* 没有数据了 */
	}
})

/* 设备型号搜索框搜索按钮点击事件 */
const handleSearch = () => {
	if (!params.value.keyword) return Toast("请先输入手机号或者会员昵称");
	memberList.value = [];
	/* 获取会员列表 */
	getMemberList();
}

/* 排序按钮点击事件 */
const handleSort = (field, sort) => {
	handleReset();
	params.value.fieldStr = field;
	params.value.orderStr = sort;
	/* 获取会员列表 */
	getMemberList();
}

/* 复制按钮点击事件 */
const handleCopy = (value, msg = "手机号") => {
	uni.setClipboardData({
		data: value,
		success: () => {
			Toast(`${msg}复制成功`);
		},
		fail: () => {
			Toast(`${msg}复制失败`);
		}
	})
}

/* 加入黑名单按钮点击事件 */
const handleJoinBlacklist = (item, index) => {
	if (item.isBlackList) return Toast("该用户已经在黑名单中！");
	request({
		url: `${ApiUrl.putBlackList}`,
		method: "post",
		data: {
			userId: params.value.userId,
			memberId: item.id,
		},
	}).then(res => {
		if (res.code === 200) {
			Toast("加入黑名单成功", "success");
			item.isBlackList = true;
			memberList.value[index] = item;
		}
	})
}

/* 联系客户按钮点击事件 */
const handleContract = (item) => {
	uni.makePhoneCall({
		phoneNumber: item.phone
	});
}

/* 获取统计信息 */
const getMemberCount = () => {
	request({
		url: `${ApiUrl.getMemberCount}`,
		method: "post",
		data: {},
	}).then(res => {
		if (res.code === 200) {
			const { totalUsers, todayNewUsers, couponCount, totalIntegral } = res.data;
			count.totalUsers = totalUsers;
			count.todayNewUsers = todayNewUsers;
			count.couponCount = couponCount;
			count.totalIntegral = totalIntegral;
		}
	})
}

/* 获取会员列表 */
const getMemberList = () => {
	request({
		url: `${ApiUrl.getMemberList}`,
		method: "post",
		data: {
			...params.value
		}
	}).then(res => {
		if (res.code === 200) {
			memberList.value = memberList.value.concat(res.data.list);
			params.value.pageCount = res.data.pages;
		}
	})
}

/* 重置数据 */
const handleReset = () => {
	memberList.value = [];
	params.value.keyword = null;
	params.value.orderStr = null;
	params.value.fieldStr = null;
	params.value.pageNum = 1;
	params.value.pageSize = 10;
	params.value.pageCount = 1;
}

/* 监听输入手机号或者会员昵称输入框 */
watch(() => params.value.keyword, (val) => {
	if (!val) {
		params.value.pageNum = 1;
		memberList.value = [];
		//* 获取会员列表 */
		getMemberList();
	}
})
</script>

<template>
	<view class="member_manage">
		<NavBar v-model:navHeight="state.navHeight">
		  <template v-slot:center>
		    <view class="search">
		      <view class="input">
		        <image class="icon" src="/static/image/navbar/search.png" mode="widthFix" @click="handleSearch" />
		        <input v-model.trim="params.keyword" placeholder="输入手机号或者会员昵称" />
		      </view>
		    </view>
		  </template>
		</NavBar>
		<view class="member_content">
			<view class="member_num">
				<image src="/static/image/home/member/bg.png" mode="aspectFill"></image>
				<view class="num">
					<view class="total">
						<text>会员总数</text>
						<text>{{ count.totalUsers }}</text>
					</view>
					<view class="add">
						<text>今日新增</text>
						<text>{{ count.todayNewUsers }}</text>
					</view>
				</view>
			</view>
			<view class="member_score">
				<view class="score">
					<image src="/static/image/home/member/bonus.png" mode="aspectFill"/>
					<view>
						<text>总存积分</text>
						<text>{{ count.totalIntegral }}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="coupon">
					<image src="/static/image/home/member/coupon.png" mode="aspectFill"/>
					<view>
						<text>未使用卡券</text>
						<text>{{ count.couponCount }}</text>
					</view>
				</view>
			</view>
			<view v-if="memberList.length > 0" class="member_list">
				<view class="top">
					<view class="item">
						<text>余额</text>
						<view class="filter">
							<image src="/static/image/icon_filter_top.png" mode="aspectFill" @click.stop="handleSort('nowMoney', 'asc')"></image>
							<image src="/static/image/icon_filter_bottom.png" mode="aspectFill" @click.stop="handleSort('nowMoney', 'desc')"></image>
						</view>
					</view>
					<view class="item">
						<text>消费</text>
						<view class="filter">
							<image src="/static/image/icon_filter_top.png" mode="aspectFill" @click.stop="handleSort('payCount', 'asc')"></image>
							<image src="/static/image/icon_filter_bottom.png" mode="aspectFill" @click.stop="handleSort('payCount', 'desc')"></image>
						</view>
					</view>
					<view class="item">
						<text>积分</text>
						<view class="filter">
							<image src="/static/image/icon_filter_top.png" mode="aspectFill" @click.stop="handleSort('integral', 'asc')"></image>
							<image src="/static/image/icon_filter_bottom.png" mode="aspectFill" @click.stop="handleSort('integral', 'desc')"></image>
						</view>
					</view>
				</view>
				<view class="member_item" v-for="(item, index) in memberList" :key="item.id">
					<view class="member_userinfo">
						<view class="avatar">
							<image :src="`${ApiUrl.ImageUrl}/${item.avatar}`" mode="aspectFill"></image>
							<text>等级{{ item.level }}</text>
						</view>
						<view class="member_userinfo_right">
							<view class="member_top">
								<view class="left">
									<view class="title">{{ item.nickname }}</view>
									<view class="user_id">
										<text>手机号：</text>
										<text>{{ item.phone }}</text>
										<text @click="handleCopy(item.phone)">复制</text>
									</view>
								</view>
								<view class="expend">
									<text>消费次数</text>
									<text>{{ item.payCount }}</text>
								</view>
							</view>
							<view class="time">
								<text>注册时间：</text>
								<text>{{ item.createTime }}</text>
							</view>
							<view class="time">
								<text>最近游玩：</text>
								<text>{{ item.lastLoginTime }}</text>
							</view>
						</view>
					</view>
					<view class="count">
						<view>
							<text>{{ item.nowMoney }}</text>
							<text>余额(元)</text>
						</view>
						<view>
							<text>{{ item.couponCount }}</text>
							<text>卡券(张)</text>
						</view>
						<view>
							<text>{{ item.integral }}</text>
							<text>积分(分)</text>
						</view>
					</view>
					<view class="operation">
						<view class="join_blacklist" @click.stop="handleJoinBlacklist(item, index)">
							<image src="/static/image/home/member/blacklist.png" mode="aspectFill"></image>
							<text>加入黑名单</text>
						</view>
						<view class="contract" @click.stop="handleContract(item)">
							<image src="/static/image/home/member/contact.png" mode="aspectFill"></image>
							<text>联系客户</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="no_data">暂无数据</view>
		</view>
	</view>
</template>

<style lang="scss">
	.member_manage {
		padding-top: calc(v-bind('state.navHeight') * 1px);
		background: #F8F9FB;
		box-sizing: border-box;
		padding-bottom: 24rpx;
		min-height: 100vh;
		.m-nav {
			.nav {
				.center {
					left: unset !important;
					transform: translate(10%, -50%) !important;
					.search {
						width: 420rpx;
						.input {
							width: 420rpx !important;
							input {
								flex: 1;
							}
						}
					}
				}
			}
		}
		.member_content {
			.member_num {
				position: relative;
				width: 686rpx;
				height: 282rpx;
				box-sizing: border-box;
				margin: 0 auto 16rpx;
				image {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
				.num {
					width: 100%;
					height: 100%;
					position: absolute;
					display: flex;
					box-sizing: border-box;
					padding: 0 0 0 36rpx;
					.total,
					.add {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						text {
							font-size: 36rpx;
							line-height: 42rpx;
							color: #7E5621;
							display: block;
							&:nth-of-type(2) {
								font-weight: 500;
								font-size: 48rpx;
								line-height: 56rpx;
								color: #7E5621;
								margin-top: 18rpx;
							}
						}
					}
					.total {
						margin-right: 76rpx;
					}
				}
			}
			.member_score {
				width: 686rpx;
				height: 148rpx;
				background: #F3E5D0;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 0 48rpx;
				margin: 0 auto;
				image {
					width: 72rpx;
					height: 72rpx;
					margin-right: 20rpx;
				}
				.score,
				.coupon {
					display: flex;
					align-items: center;
					text {
						font-size: 28rpx;
						line-height: 33rpx;
						color: #7E5621;
						&:nth-of-type(2) {
							font-size: 36rpx;
							font-weight: 500;
						}
					}
				}
				.line {
					width: 4rpx;
					height: 88rpx;
					background: rgba(207,159,94,0.5);
					border-radius: 6rpx;
					margin: 0 76rpx;
				}
			}
			.member_list {
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				margin: 44rpx auto 0;
				.top {
					width: 100%;
					height: 88rpx;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #F1F1F1;
					box-sizing: border-box;
					padding-left: 32rpx;
					.item {
						display: flex;
						align-items: center;
						margin-right: 72rpx;
						text {
							font-size: 32rpx;
							line-height: 38rpx;
							color: #303030;
						}
						.filter {
							margin-left: 8rpx;
							display: flex;
							flex-direction: column;
							image {
								width: 17rpx;
								height: 11rpx;
								&:nth-of-type(1) {
									margin-bottom: 6rpx;
								}
							}
						}
					}
				}
				.member_item {
					box-sizing: border-box;
					padding: 50rpx 32rpx 50rpx 20rpx;
					&:not(:last-child) {
						border-bottom: 2rpx solid #F1F1F1;
					}
					.member_userinfo {
						display: flex;
						.avatar {
							display: flex;
							flex-direction: column;
							align-items: center;
							image {
								width: 72rpx;
								height: 72rpx;
								border-radius: 50%;
							}
							text {
								padding: 2rpx 16rpx;
								font-size: 24rpx;
								line-height: 28rpx;
								color: #7E5621;
								text-align: center;
								background: #F2D4A0;
								border-radius: 8rpx;
								margin-top: 16rpx;
							}
						}
						.member_userinfo_right {
							flex: 1;
							margin: 0 0 0 24rpx;
							.member_top {
								display: flex;
								justify-content: space-between;
								.left {
									flex: 1;
									.title {
										font-weight: 500;
										font-size: 34rpx;
										line-height: 46rpx;
										color: #303030;
										margin-bottom: 16rpx;
									}
									.user_id {
										display: flex;
										align-items: center;
										text {
											font-size: 24rpx;
											line-height: 36rpx;
											color: #969699;
											&:nth-of-type(2) {
												color: #303030;
											}
											&:nth-of-type(3) {
												color: #FF9832;
												margin-left: 32rpx;
											}
										}
									}
								}
								.expend {
									display: flex;
									flex-direction: column;
									text {
										display: flex;
										align-items: center;
										justify-content: center;
										width: 126rpx;
										height: 44rpx;
										font-size: 24rpx;
										line-height: 28rpx;
										color: #7E5621;
										box-sizing: border-box;
										&:nth-of-type(1) {
											background-color: #F2D4A0;
											border-radius: 8rpx 8rpx 0 0;
										}
										&:nth-of-type(2) {
											border-radius: 0 0 8rpx 8rpx;
											border: 2rpx solid #F2D4A0;
											border-top: unset;
										}
									}
								}
							}
							.time {
								&:nth-child(1) {
									margin: 12rpx 0;
								}
								text {
									font-size: 24rpx;
									line-height: 36rpx;
									color: #969699;
									&:nth-of-type(2) {
										color: #303030;
									}
								}
							}
						}
					}
					.count {
						display: flex;
						justify-content: space-between;
						margin: 40rpx 0 48rpx 12rpx;
						view {
							width: 184rpx;
							height: 136rpx;
							background: #FBFBFB;
							border-radius: 8rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							text {
								display: block;
								font-size: 28rpx;
								line-height: 33rpx;
								color: #303030;
								text-align: center;
								&:nth-child(1) {
									color: #FF9832;
									font-weight: 500;
									font-size: 36rpx;
									line-height: 42rpx;
									margin-bottom: 10rpx;
								}
							}
						}
					}
					.operation {
						display: flex;
						align-items: center;
						justify-content: center;
						.join_blacklist,
						.contract {
							display: flex;
							align-items: center;
							image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 12rpx;
							}
							text {
								font-size: 24rpx;
								line-height: 28rpx;
								color: #979797;
							}
						}
						.contract {
							margin-left: 150rpx;
						}
					}
				}
			}
			.no_data {
				font-size: 24rpx;
				color: #929292;
				text-align: center;
				margin: 44rpx 0;
			}
		}
	}
</style>